<template>
	<view class="container">
		<!-- 顶部信息区 -->
		<view class="header">
			<image class="avatar" :src="member.headPortrait"></image>
			<view class="info">
				<text class="name">{{member.surname}}{{member.memberName}}</text>
				<text class="relation">第{{member.generation}}世 - {{member.relation}}</text>
			</view>
		</view>

		<!-- 简介区 -->
		<view class="introduction">
			<text>介绍：{{member.introduction}}</text>
		</view>

		<!-- 详细信息区 -->
		<view class="details">
			<text class="title">基本信息</text>
			<uni-list>
				<uni-list-item title="性别" :rightText="member.gender==1 ?'男':'女'"></uni-list-item>
				<uni-list-item title="生日" :rightText="member.birthdate"></uni-list-item>
				<uni-list-item title="出生地" :rightText="member.birthplace"></uni-list-item>
				<uni-list-item title="字辈" :rightText="member.generation"></uni-list-item>
				<uni-list-item title="花名/别名" :rightText="member.nickname"></uni-list-item>
				<uni-list-item title="当前状态" :rightText="member.memberStatus"></uni-list-item>
				<uni-list-item title="是否建在" :rightText="member.isAlive?'是':'否'"></uni-list-item>
			</uni-list>

			<text class="title">补充信息</text>
			<uni-list>
				<uni-list-item title="民族" :rightText="member.ethnicity"></uni-list-item>
				<uni-list-item title="现居地" :rightText="member.currentAddress"></uni-list-item>
				<uni-list-item title="学校" :rightText="member.school"></uni-list-item>
				<uni-list-item title="学历" :rightText="member.education"></uni-list-item>
				<uni-list-item title="公司" :rightText="member.workPlace"></uni-list-item>
				<uni-list-item title="职位" :rightText="member.position"></uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script>
	import {
		getGenealogyMember
	} from "@/api/record/genealogyMember.js"
	export default {
		data() {
			return {
				member: {}
			}
		},
		onLoad(event) {
			console.log(event.memberId);
			getGenealogyMember(event.memberId).then(resp => {
				console.log(resp);
				this.member = resp.data;
			})

		},
		methods: {}
	}
</script>

<style scoped>
	.container {
		padding: 20px;
	}

	.header {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.avatar {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		margin-right: 10px;
	}

	.info .name {
		font-size: 18px;
		font-weight: bold;
	}

	.info .relation {
		font-size: 14px;
		color: #666;
	}

	.introduction {
		background-color: #f0f0f0;
		padding: 10px;
		margin-bottom: 20px;
	}

	.title {
		font-size: 16px;
		font-weight: bold;
		margin: 20px 0 10px;
	}
</style>